// 面向对象分三步   
// 1 构造函数
function Swiper(obj){
    this.el = this.getEl(obj.el)    // 元素
    this.pics = this.gets(".swiper-slide" , this.el) // 图片
    this.speed = obj.speed || 1000   // 动画执行时间
    this.await = obj.await || 3000   // 等待时间
    this.autoplay = obj.autoplay || false // 是否开启自动轮播
    this.index = obj.activeIndex || 0  // 初始化下标

    // 根据用户指定的下标 初始化图片
    this.pics[this.index].classList.add("opacity")
    // 初始化
    this.init()
}


// 2 原型对象
// 初始化
Swiper.prototype.init = function(){
    // 需要分页器 渲染 且默认高亮
    this.$(".swiper-pagination" , this.el) && this.setPagination()
    // 给上下绑定事件
    this.$(".swiper-button-prev" , this.el) && this.bindEventBtn()
    // 是否开启自动轮播 
    this.autoplay && this.autoplayFn()
}

// 设置分页
Swiper.prototype.setPagination =  function(){
    this.$(".swiper-pagination" , this.el).innerHTML = this.pics.map((pic , i) => {
        return `<span class="${this.index === i ? 'active' : ''}"></span>`
    }).join("")
    // 将渲染好的分页器 挂在当前实例上
    this.tabs = this.gets("span" , this.$(".swiper-pagination", this.el ))
    // 给分页器 绑定点击事件
    this.clickTab()
}

// 分页器点击
Swiper.prototype.clickTab = function(){
    this.tabs.forEach((span , i) => {
        span.addEventListener("click" , () => {
            this.changeTab( i )
        })
    })
}

// 上下绑定事件
Swiper.prototype.bindEventBtn = function(){
    // 上
    this.$(".swiper-button-prev" , this.el).addEventListener("click" ,  this.prevImg.bind(this))

    // 下
    this.$(".swiper-button-next" , this.el).addEventListener("click" , this.nextImg.bind(this))
}
// 下一张函数
Swiper.prototype.nextImg = function() {
    var i = this.index + 1
    // 判断当前下标已经是最后一张   从第一张开始
    if(i > this.pics.length - 1) i = 0;
    this.changeTab( i )
}
// 上一张函数
Swiper.prototype.prevImg = function(){
    var i = this.index - 1
    // 判断当前下标已经是第一张   从最后一张开始
    if(i < 0) i = this.pics.length - 1;
    this.changeTab( i )
}

// 切换高亮的函数
Swiper.prototype.changeTab = function( i ){
    // 排他 先把之前的取消
    this.pics[this.index].classList.remove("opacity")
    this.tabs && this.tabs[this.index].classList.remove("active")
    // 将初始化下标 修改为 正在点击的内容所对应的下标 
    this.index = i
    // 给当前添加
    this.pics[this.index].classList.add("opacity")
    this.tabs && this.tabs[this.index].classList.add("active")
    this.pics[this.index].style.transition = `opacity ${this.speed}ms`
}

// 自动轮播  即 按照用户指定的await 等待时间  执行点击下一张
Swiper.prototype.autoplayFn = function(){
    // bind 修改this指向   
    this.timer = setInterval( this.nextImg.bind(this) , this.await )
    // 给整个大盒子 设置鼠标进入 停止轮播  离开继续
    this.el.addEventListener("mouseover" , () => {
        clearInterval(this.timer)
    })
    this.el.addEventListener("mouseout" , () => {
        this.timer = setInterval( this.nextImg.bind(this) , this.await )
    })
}

// 获取元素 
Swiper.prototype.$ = function(el , parent){
    parent = parent || document;
    return parent.querySelector(el)
}
Swiper.prototype.gets = function(el , parent){
    parent = parent || document;
    return [...parent.querySelectorAll(el)]
}
Swiper.prototype.getEl = function(el){
    // 判断el 是元素对象本身 直接返回
    if(el.nodeType === 1){
        return el
        // 判断是字符串  借助$ 获取元素返回
    }else if(typeof el === "string"){
        return this.$(el)
        // 抛出错误
    }else{
        throw new Error("el参数不正确")
    }
}


// 3 实例化对象
new Swiper({
    el : ".banner1" ,
    speed : 3000 ,
    await : 5000 ,
    activeIndex : 2,
    autoplay : true
})

new Swiper({
    el : document.querySelector(".banner2")
})

new Swiper({
    el : ".banner3"
})

new Swiper({
    el : ".banner4" ,
    autoplay : true
})

